White Label Visier
Change the appearance of the application, including typography, color, and border radius.
Who can use this feature?
- This is available to Embedded Partners
Not sure if you have this feature or capability? Reach out to your administrator.
Overview
You can customize Visier to align with your application's branding, creating a seamless user experience.
Note: White labeling is supported in reports, guidebooks and analyses.
White labeling options
Visier's white-labeling options offer granular control over application branding, categorized by visual customization and functional customization.
Visual customization
These categories define the specific types of visual elements you can customize using CSS variables.
-
Typography:
-
Font family: Change the overall font.
-
Font size: Adjust text size.
-
Font weight: Modify text boldness or lightness.
-
-
Color:
-
Text foreground: Control text color.
-
Background: Set background colors.
-
Border: Define border colors.
-
Hover: Specify colors for elements when a user hovers over them.
-
Semantic colors: Customize colors for specific meanings, such as: success, error, warning, info, danger.
-
-
Border radius: Adjust the roundness of corners on UI elements.
Levels of application
The levels dictate the scope of visual customization, from broad application-wide changes to very specific component level adjustments.
-
Global (primitive): This is the broadest level, affecting the entire application. Changes at this level act as fundamental building blocks.
-
Brand: Applies to all components that use brand styles.
-
Component: Allows customization of a specific component, overriding global and brand settings for that element.
-
Component state: This is the most granular level, allowing customization of a specific component when it is in a particular state.
Functional customization
Uses dedicated configuration objects to control the structure and content of the UI, such as tab display text and visibility.
Visual customization variables
To find out which UI element or component is controlled by which CSS variable, see Identify customization variables.
|
Variable Name |
Scope |
Description |
|---|---|---|
|
|
Category: Typography Level: Global Availability: Reports, Guidebooks, Analyses |
Controls the font family of all visible text. For example, |
|
|
Category: Typography Level: Global Availability: Reports |
Scale of the font weights. These variables control the text boldness or lightness of all visible text. For example:
|
|
|
Category: Border Radius Level: Global Availability: Reports |
Controls the roundness of corners on UI elements. For example, |
|
|
Category: Color Level: Brand Availability: Reports, Guidebooks, Analyses |
Scale of brand colors, ranging from darkest to lightest. These variables control the colors of UI elements that use the brand color, such as primary buttons and toggles. For example, |
|
|
Category: Color Level: Global Availability: Reports, Guidebooks, Analyses |
Grayscale, ranging from darkest to lightest. These variables control the base tones used throughout the UI such as text, borders, highlights, hover states, or shadows. For example, |
|
|
Category: Color Level: Component Availability: Analyses |
Controls the primary and secondary text color in an analysis. |
|
|
Category: Color Level: Component Availability: Analyses |
Sets the background color for the analysis header or body. |
|
|
Category: Color Level: Component Availability: Reports |
Controls the primary background color. |
|
|
Category: Color Level: Component Availability: Reports |
These variables control the background or foreground colors of an individual button component. For example, |
|
|
Category: Color Level: Component state Availability: Reports |
These variables control the background or foreground colors of an individual component in hover state. For example, |
Functional customization objects
The following functional customization options are nested under the reporting key to target the Reports room tabs.
tabLabelTextOverride
|
Property |
Description |
Type |
Example |
|---|---|---|---|
|
owned |
Overrides the text for the Owned by me tab in the Reports room. |
string |
|
|
shared |
Overrides the text for the Shared with me tab in the Reports room. |
string |
|
|
published |
Overrides the text for the Published tab in the Reports room. |
string |
|
tabUiVisibility
|
Property |
Description |
Type |
Example |
|---|---|---|---|
|
owned |
Controls visibility of the Owned by me tab in the Reports room. |
boolean |
|
|
shared |
Controls visibility of the Shared with me tab in the Reports room. |
boolean |
|
|
published |
Controls visibility of the Published tab in the Reports room. |
boolean |
|
How to white label Visier
White labeling is applied using the whiteLabelingConfig object within the additionalAppsConfig object in Visier's SDK embedding script. This allows you to configure the application's appearance. For more information, see additionalAppsConfig fields.
Note: Before white-labeling, ensure you've successfully embedded the Visier application into your environment. For detailed embedding instructions, see Embed the Full Visier Application.
The following code sample is an example of customized CSS variables and functional configuration.
visier('bootstrap', visierConfig, async function(app) {
const containerId = ...;
const url = ...;
const maxRetry = ...;
const additionalConfig = {
whiteLabelingConfig: {
cssValues: {
"--visier-font-family": "Helvetica, Open Sans, sans-serif",
"--visier-color-brand-1": "#FF8C00",
},
tabLabelTextOverride: {
reporting: {
owned: "Custom Reports",
},
},
tabUiVisibility: {
reporting: {
shared: false,
},
}
},
};
app.embedApp(containerId, url, maxRetry, additionalConfig);
});additionalAppsConfig fields
The following fields in the additionalAppsConfig code snippet allow you to white label the embedded Visier application.
| Field | Description | Type | Required | |
|---|---|---|---|---|
|
whiteLabelingConfig |
A parent object containing the configuration settings for white labeling the application. |
object |
Optional |
|
|
|
cssValues |
An object representing a range of CSS key-value pairs to apply to the UI. |
object |
Optional |
|
|
tabLabelTextOverride |
An object used to change the display text for specific Reports room tabs. |
object |
Optional |
|
|
tabUiVisibility |
An object used to control the visibility of specific Reports room tabs. |
object |
Optional |
Identify customization variables
To effectively white label your application, you'll need to find out which UI element or component is controlled by which CSS variable. You can do this using your browser's developer tools.
-
Right click on the page element that you want to customize, and select Inspect.
-
In the developer tools panel, use the Select an element tool to click on the desired UI area, for example a button.
-
In the Elements > Styles tab, scroll through the applied CSS rules and styles. Look for CSS variables that start with
--visier. These are the variables you can override using thewhiteLabelingConfigobject. For example, by inspecting the Create report button we can see the variables that are being applied, such as--visier-color-button-primary-bgfor the background color and--visier-color-button-primary-fgfor the text color.
-
Optional: You can temporarily modify the CSS variables directly in the developer tools to see the immediate effect. This helps confirm you've found the correct variable.
-
Once you've found the correct variable, add the customized key-value pair to the
whiteLabelingConfigobject in your embedding script.